<template>
  <el-card class="card_style">
    <div slot="header" class="center_x">
      <strong>用户登录</strong>
    </div>
    <el-row :gutter="24" class="center_x pa_1">
      <el-col :span="20">
        <el-select
          v-model="value"
          value-key=""
          placeholder="请选择用户类别"
          style="width: 100%;"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="center_x pa_1 my_2">
      <el-col :span="20">
        <el-input
          placeholder="请输入账号"
          prefix-icon="el-icon-mobile-phone"
          v-model="username"
        ></el-input>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="center_x pa_1 my_2">
      <el-col :span="20">
        <el-input
          placeholder="请输入密码"
          prefix-icon="el-icon-lock"
          show-password
          v-model="password"
        ></el-input>
      </el-col>
    </el-row>
    <!-- <el-row :gutter="24" class="center_x pa_1" >
      <el-col :span="20">
        <el-button type="primary" class="fill_x" @click="login">登录</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="center_x pa_1" >
      <el-col :span="20">
        <el-button type="primary" class="fill_x" @click="loginExpress">专家入口</el-button>
      </el-col>
    </el-row>-->
    <el-row :gutter="24" class="center_x pa_1">
      <el-col :span="10" class="center_x">
        <el-button type="danger" @click="loginExpress" class="fill_x"
          >专家入口</el-button
        >
      </el-col>
      <el-col :span="10" class="center_x">
        <el-button type="primary" @click="login" class="fill_x">登录</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="pa_1">
      <el-col :span="12" class="center_x">
        <el-link @click.native="showRegist = true">注册</el-link>
      </el-col>
      <el-col :span="12" class="center_x">
        <el-link @click.native="showForget = true">忘记密码</el-link>
      </el-col>
    </el-row>
    <ForgetPassword :visible.sync="showForget"></ForgetPassword>
    <Registor :visible.sync="showRegist"></Registor>
  </el-card>
</template>

<script>
import ForgetPassword from '../dialog/ForgetPassword.vue'
import Registor from '../dialog/Registor.vue'
import UserApi from '../../api/UserApi.js'
export default {
  data() {
    return {
      options: [
        {
          label: '管理员',
          value: 1
        },
        {
          label: '教师',
          value: 2
        },
        {
          label: '评审专家',
          value: 3
        },
        {
          label: '高校学生',
          value: 4
        }
      ],
      value: 4,
      showForget: false,
      showRegist: false,
      username: '',
      password: ''
    }
  },
  components: {
    ForgetPassword,
    Registor
  },
  methods: {
    login() {
      //验证待处理
      // let token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MTYsImV4cCI6MTU5NTY3NzA5ODE0OCwicm9sZUlkIjoxLCJsb2dpbk5hbWUiOiJ6aGFuZ2h1YSIsInVzZXJuYW1lIjoi5byg5Y2OIn0.98AnvEnwPYOwLFUp2IRxsi28-YtBS4T0-tor2nQB5wU";
      this.axios
        .post(UserApi.login, {
          roleId: this.value,
          loginName: this.username,
          password: this.password
        })
        .then(res => {
          if (res.data.status == 0) {
            window.console.log(res)
            let token = res.data.data
            this.$store.commit('resetToken', token)
            this.$router.push('/home')
          } else {
            this.$message({
              type: 'error',
              message: res.data.msg
            })
          }
        })
      // this.axios.post('').then(res=>{
      // })
    },
    loginExpress() {
      this.value = 3
      this.username = 'zhuanjia'
      this.password = '123'
      this.login()
    }
  }
}
</script>

<style scope>
.card_style {
  width: 350px;
}
</style>
